<script setup name="home">
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';


const router = useRouter();
const route = useRoute();
const store = useStore();
const params = reactive({

});

// 跳转登录页
function toLogin() {
  router.push('/login');
}
// 跳转个人信息页
function toMyInfo() {
  console.log(1);
}
// 跳转分类页
function toCategory(id) {
  // store.dispatch('category/updateCategoryList', id);
  // 路由传参
  router.push({
    name: 'category',
    params: {
      id,
    },
  });
}
// 跳首页
function toHome() {
  router.push('/');
}
// 全部分类
store.dispatch('home/updateHomeCategoryHead');
const homeCategory = computed(() => store.state.home.homeCategoryHead);

// 购物车
store.dispatch('shoppingCart/updateCartList');
const cartList = computed(() => store.state.shoppingCart.cartList);

</script>

<template>
  <div class="min-width">
    <div class="top-wrapper">
      <div class="app-top">
        <span class="top-title" @click="toLogin()">请先登录</span>
        <span class="top-title">免费注册</span>
        <span class="top-title">我的订单</span>
        <span class="top-title">会员中心</span>
        <span class="top-title">帮助中心</span>
        <span class="top-title">关于我们</span>
        <span class="top-title">手机版</span>
      </div>
    </div>
    <el-affix :offset="0">
      <div class="nav-wrapper">
        <div class="app-nav">
          <a href="#" class="nav-logo">
            小兔鲜
          </a>
          <ul class="nav-tags">
            <li class="tag">
              <span @click="toHome">首页</span>
            </li>
            <li href="#" class="tag" v-for="h in homeCategory" :key="h.id">
              <span @click="toCategory(h.id)">{{ h.name }}</span>
            </li>
          </ul>
          <div class="nav-search">
            <Search class="nav-search-icon" />
            <input type="text" placeholder="搜一搜" class="search">
          </div>
          <div class="nav-shopping-car">
            <div class="icon-wrapper">
              <icon name="shoppingcar" size="12" class="nav-shopping-car-icon"></icon>
              <span class="icon-tip"> {{ cartList.allIn }} </span>
            </div>
          </div>
        </div>
      </div>
    </el-affix>
    <router-view />
  </div>

</template>>

<style scoped lang="scss">
    .min-width {
    min-width: 1200px;
    }

    // 首页顶部
    .top-wrapper {
    width: 100%;
    height: 53px;
    background-color: #333333;
    min-width: 1240px;

    .app-top {
    display: flex;
    width: 1240px;
    height: 53px;
    margin: 0 auto;
    font-size: 12px;
    color: #cdcdcd;
    justify-content: flex-end;
    align-items: center;

    .top-title {
    display: block;
    padding: 0 16px;
    cursor: pointer;
    border-right: 1px solid #666;
    border-left: 1px solid #666;

    &:hover {
    color: #27ba9b;
    }

    &:first-child {
    border-left: none;
    }

    &:last-child {
    border-right: none;
    }
    }
    }
    }

    // 首页导航
    .nav-wrapper {
    background-color: #fff;

    .app-nav {
    display: flex;
    width: 1240px;
    margin: 0 auto;
    height: 132px;

    .nav-logo {
    display: block;
    width: 200px;
    height: 100%;
    text-indent: -9999px;
    background: url(../../assets/imgs/logo.0940ebb5.png) no-repeat center 18px/contain;
    }

    .nav-tags {
    width: 820px;
    display: flex;
    align-items: center;

    .tag {
    flex: 1;
    display: block;
    height: 40px;
    line-height: 34px;

    span {
    display: inline-block;

    &:hover {
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
    cursor: pointer;
    }
    }
    }
    }

    .nav-search {
    position: relative;
    width: 170px;
    text-align: center;
    line-height: 126px;
    box-sizing: border-box;

    .search {
    width: 170px;
    height: 32px;
    border: none;
    outline: none;
    border-bottom: 1px solid #e7e7e7;
    padding: 0 0 0 24px;

    &::placeholder {
    color: #ccd0db;
    }
    }

    .nav-search-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 54px;
    left: 0;
    }
    }

    .nav-shopping-car {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .icon-wrapper {
    position: relative;
    width: 50px;
    height: 32px;
    text-align: center;

    .nav-shopping-car-icon {
    width: 28px;
    height: 28px;
    margin-top: 2px;
    margin-left: 4px;
    }

    .icon-tip {
    display: inline-block;
    padding: 0 8px;
    background-color: #e26237;
    position: absolute;
    top: 0;
    left: 28px;
    color: #fff;
    border-radius: 9999999999px;
    font-size: 12px;
    }
    }
    }
    }
    }
  </style>
